<template>
    <div>
        <el-table :data="machineTypeList" :highlight-current-row="true"  class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading" @expand-change="handleExpandChange">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <div class="block" ref="tree">
                        <el-tree :data="props.row.bomList" node-key="id" :props="defaultProps" accordion :load="loadNode" lazy class="bomTree">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span v-html="node.label+ (data.specification?'&nbsp;&nbsp;&nbsp;&nbsp;'+data.specification:'')"></span>
                                <span>
                                    <el-button circle icon="el-icon-plus" size="mini" type="success" @click="insert(node,data)" v-if="node.level<4"></el-button>
                                    <el-button circle icon="el-icon-edit" size="mini" type="primary" @click="update(node, data)"></el-button>
                                </span>
                            </span>
                        </el-tree>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="机器型号" prop="name"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="100">
                <template slot-scope="scope">
                     <el-button type="success" @click="isShowDialog(scope.row)" icon="el-icon-plus">新增</el-button>
                </template>
            </el-table-column>
        </el-table>
         <el-dialog :title="dialog.title" width="750px" center :visible.sync="dialog.isShow" :close-on-click-modal="false">
            <div :style="tableDialogHeightTabPane">
                <el-form :inline="true" class="popoverForm" ref="bomFrom" :rules="bomFromRule" :model="bomFrom" label-position="right">
                    <el-form-item label="机器名称" prop="machineName" class="machineName">
                        <el-input v-model="bomFrom.machineName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="物料名称" prop="name">
                        <el-input v-model="bomFrom.name"  placeholder="请输入物料名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="bom名称" prop="bomName">
                        <el-input v-model="bomFrom.bomName"  placeholder="请输入bom名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="规格型号" prop="specification">
                        <el-input v-model="bomFrom.specification"  placeholder="请输入规格型号">
                        </el-input>
                    </el-form-item>
                    <el-form-item  label="材质"  prop="texture">
                         <el-input v-model="bomFrom.texture"  placeholder="请输入材质">
                        </el-input>
                    </el-form-item>
                    <el-form-item  label="图号"  prop="texture">
                         <el-input v-model="bomFrom.figureNum"  placeholder="请输入图号">
                        </el-input>
                    </el-form-item>
                    <el-form-item  label="数量"  prop="nums">
                        <el-input-number v-model="bomFrom.nums" controls-position="right" :min="1" label="数量"></el-input-number>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align: center;">
                    <el-button @click="submitList" type="primary">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import api from '@/axios/api.js'
export default {
    data(){
        return {
            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            loading:false,
            machineTypeList:[],/*机器型号列表*/
            allBomList:[],/**所有bom列表 */
            bomList:[],/**bom树 */
            defaultProps:{
                label:'name',
                children:'chlidren',
                id: 'bid'
            },
            bomFrom:{},
            dialog:{/**弹框配置 */
                title:'',
                isShow:false,
            },
            bomFromRule:{
            }
        }
    },
    created(){
        let self = this;
        self.getTableData();
        api.bomList().then(res=>{
            self.allBomList = [];
            res.content.forEach(element => {
                element.value = element.name;
                self.allBomList.push(element);
            });
        })
    },
    methods:{
        getTableData(){
            let self = this;
            self.loading = true;
            self.machineTypeList=[]
            api.machineTypeCode(4).then(res=>{
                self.loading =false;
                res.content.forEach(el=>{
                    el.bomList=[];
                    self.machineTypeList.push(el);
                })
            },error=>{
                    self.loading =true;
            })
        },
        isShowDialog(row){
            let self = this;
            self.dialog.isShow=true;
            self.dialog.title="添加物料";
            self.bomFrom={
                machineName:row.name,
                machineType:row.code,
                name:'',
                bomName:'',
                specification:'',
                figureNum:'',
                texture:'',
                nums:1,
                parentId1:0
            }
        },
        querySearchAsync(queryString, callback){
            let restaurants = this.allBomList;
            let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : this.allBomList;
           callback(results);
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !==-1);
            };
        },
        handleSelect(item){
            this.bomFrom.bomName = item.value;
            this.bomFrom.bid = item.id;
        },
        handleExpandChange(row){/**点击展开表格 */
            api.machinetypeBom({type:row.code,pid:1}).then(res=>{
                row.bomList = res.content;
            })
        },
        loadNode(node, resolve){
            let self = this;
            let data={
                type:node.data.machineType,
            }
        switch(node.level){
            case 1:
                data.pid2=node.data.parentId1+'.';
            break;
            case 2:
                data.pid3=node.data.parentId2+"."
            break;
            case 3:
                data.pid4=node.data.parentId3+'.'
            break;
        }
        if(node.level<4){
            api.machinetypeBom(data).then(res=>{
                resolve(res.content)
            })
        }else{
            return resolve([])
        }
        },
        submitList(){
             let self = this;
            let type = self.dialog.title==='编辑'?'update':'insert';
            let data={
                machineType: self.bomFrom.machineType,
                name: self.bomFrom.name,
                bomName:self.bomFrom.bomName,
                specification: self.bomFrom.specification,
                texture: self.bomFrom.texture,
                figureNum: self.bomFrom.figureNum,
                nums: self.bomFrom.nums,
                parentId: self.bomFrom.parentId,
                parentId1: self.bomFrom.parentId1,
                parentId2: self.bomFrom.parentId2,
                parentId3: self.bomFrom.parentId3,
                parentId4: self.bomFrom.parentId4,
                parentId5: self.bomFrom.parentId5,
                id: self.dialog.title==='编辑'? self.bomFrom.id:null,
            };
            api.addUpdatemAchinetypeConfig(type,data).then(res=>{
                 self.dialog.isShow=false;
                 self.getTableData();
                self.$message.success(`${ self.dialog.title}成功`);
            },error=>{
                 self.$message.error(`${ self.dialog.title}失败`);
            });
        },
        insert(node,data){
            let self = this;
            self.dialog.isShow=true;
            self.dialog.title="添加物料";
            self.bomFrom={
                machineName:data.machineName,
                machineType:data.machineType,
                name:'',
                bomName:'',
                specification:'',
                texture:'',
                figureNum:'',
                nums:1,
            }
            let childIndex=node.childNodes.length;
             switch(node.level){
                case 1:
                    self.bomFrom.parentId2=node.data.parentId1+"."+childIndex;
                break;
                case 2:
                    self.bomFrom.parentId3=node.data.parentId2+"."+childIndex
                break;
                case 3:
                    self.bomFrom.parentId4=node.data.parentId3+"."+childIndex
                break;
            }
            debugger;
        },
        update(node,data){
            let self = this;
            self.dialog.isShow=true;
            self.dialog.title="编辑";
            self.bomFrom={
                machineName:data.machineName,
                machineType:data.machineType,
                id: data.id,
                name:data.name,
                bomName:data.bomName,
                specification:data.specification,
                texture:data.texture,
                figureNum:data.figureNum,
                nums:data.nums,
                parentId:data.parentId,
                parentId1:data.parentId1,
                parentId2:data.parentId2,
                parentId3:data.parentId3,
                parentId4:data.parentId4,
                parentId5:data.parentId5,
            }
        }
    }
}
</script>
<style scoped>
.block{
    font-size: 0;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
}

.custom-tree-node > span:first-child {
    margin: 0 40px 0 0;
}

.custom-tree-node > span:nth-child(2) {
    display: none;
}

.custom-tree-node:hover > span:nth-child(2) {
    display: inline-block;
}
.machineName{
    width: 90%;
}
.bomTree{
    max-height: 300px;
    overflow-y:auto;
}
</style>


